<template>
	<div class="admin-auto-time" v-loading="vLoading">
		<x-border ref="xBorder" :title="viewModel.title" v-if="viewModel">
			<div class="time-box">
				<div class="time-box_head">{{viewModel.name}}</div>
				<div class="time-box_intro">{{viewModel.intro}}</div>
				<el-timeline :reverse="reverse">
					<el-timeline-item v-for="(activity, index) in viewModel.times" :key="index" :timestamp="activity.time">
						{{activity.title}}
					</el-timeline-item>
				</el-timeline>
			</div>
		</x-border>
	</div>
</template>

<script>
	import ala from 'ala'
	export default {
		data() {
			return {
				reverse: false,
				viewModel: null,
				vLoading: false
			}
		},
		methods: {
			async init(id, type) {
				this.vLoading = true
				var para = {
					type: type,
					id: id
				}
				var repones = await this.$ala.httpGet('Api/autoTime/getview', para)
				this.viewModel = repones
				this.vLoading = false
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	.admin-auto-time {
		.time-box {
			padding: 40px;

			.time-box_head {
				font-size: 16px;
				color: #333333;
			}

			.time-box_intro {
				font-size: 18px;
				color: #999999;
				margin-top: 10px;
				margin-bottom: 30px;
			}
		}
	}
</style>